<template>
<div class="dep-operate">
  <div class="clearfix title">
    <!-- <label class="fl" v-once>{{$t('km.operateDept')}}</label>
    <el-popover placement="bottom" width="500" trigger="click"> -->
      <!-- <el-input size="mini" v-model.trim="value">
      </el-input> -->
      <!-- <el-tree :data="(tree[0] && tree[0].children) || []" ref="tree" class="tree" :check-strictly="true" node-key="_id" :props="{label: 'name',}" @check="checkChange" :filter-node-method="filterNode" :show-checkbox="true"></el-tree> -->
      <!-- <owner-tree :watchRight='true'  @getRight='showSelected' style="padding-top:10px" ref="treeTransfer" :_scopeArray="allArray"></owner-tree> -->
      <!-- <el-button slot="reference" icon="el-icon-plus" size="small" type="text" class="fr">
        {{$t('config.agent.addDeptAndPerson')}}
      </el-button>
    </el-popover> -->
    {{$t('km.directoryPermissions')}}
  </div>
  <owner-tree :watchRight='true'  @getRight='showSelected' style="padding-top:10px" ref="treeTransfer" :_scopeArray="allArray"></owner-tree>
  <!-- <div class="dep-list">
    <el-tag v-for="item in checkedNodes" :key="item._id" size="small" type="info" class="tag" @close="close(item)" closable>
      {{item.name}}
    </el-tag>
  </div>
  <div class="clearfix">
    <label  v-once>可操作人员</label>
      <div class="dep-list">
    <el-tag v-for="item in people" :key="item._id" size="small" type="info" class="tag" @close="close(item)" closable>
      {{item.name}}
    </el-tag>
  </div>
  </div> -->
</div>
</template>

<script>
import OwnerTree from '@/components/public-modules/agent-tree/OwnerTree.vue'
export default {
  components: {OwnerTree},
  name: 'operateDep',
  props: {
    showDepartment: {
      type: Array,
      default: function() {
        return []
      }
    },
    showAgents:{
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      value: '',
      checkedNodes: [],
      tree: [],
      people: [],
      allArray:[]
    }
  },
  watch: {
    allArray() {
      this.$nextTick(()=>{
        this.showSelected(this.$refs.treeTransfer.$refs.treeTransfer.self_to_data)
        this.$forceUpdate()
      })
    },
    showDepartment() {
      this.allArray = this.showDepartment.concat(this.showAgents)
    },
    showAgents(){
      this.allArray = this.showDepartment.concat(this.showAgents)
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    reset() {
      // this.value = ''
      // this.$refs.tree.setCheckedKeys([])
      // this.checkedNodes = []
      // this.$refs.tree.reset()
    },
    setCheckedKeys(arr) {
      // this.value = ''
      // this.$refs.tree.setCheckedKeys(arr || [])
      // this.getCheckedNodes()
      // this.$refs.tree.reset()
    },
    getCheckedNodes() {
      this.checkedNodes = this.$refs.tree.getCheckedNodes()
    },
    setCheckedNodes(){
      this.checkedNodes = ''
    },
    close(item) {
      this.$refs.tree.setChecked(item._id, false)
      this.getCheckedNodes()
    },
    save() {
      return this.showSelected() || []
    },
    checkChange(current, all) {
      this.checkedNodes = all.checkedNodes
    },
    getMyKeys(){
      const person = []
      const dep = []
      this.people.forEach(item=>{
        person.push(item._id)
      })
      this.checkedNodes.forEach(item=>{
        dep.push(item._id)
      })
      return [person,dep]
    },
    showSelected(val){
      val =  this.$refs.treeTransfer.$refs.treeTransfer.self_to_data
      const depArr = []
      const personArr = []
      val.forEach(items=>{
        add(items)
      })
      function add(arr){
        if(arr instanceof Array){
          arr.forEach(item => {
            if(item.pid ==='owner'){
              personArr.push(item._id)
            }
            if(item.pid === 'dept'){
              depArr.push(item._id)
            }
            if(item.children){
              add(item.children)
            }
         })
        }else{
          if(arr.children){
            add(arr.children)
          }
        }
      }
      return[personArr,depArr]
    }
  },
  beforeMount() {
    this.allArray = this.showDepartment.concat(this.showAgents)
    // console.log(this.showDepartment)
    // this.$store.dispatch('getCache', {
    //   type: 'depts'
    // }).then((depts) => {
    //   let optionData = []
    //   dealDept(depts, optionData, '')
    //   console.log(depts)
    //   this.tree = optionData
    //   this.$nextTick(() => {
    //     this.setCheckedKeys(this.showDepartment)
    //   })
    // })
    
  },
  mounted(){
    this.showSelected(this.$refs.treeTransfer.$refs.treeTransfer.self_to_data)
  }
}

function dealDept(depts, arr, key) {
  for (let i = 0; i < depts.length; i++) {
    let dept = depts[i]
    if (dept.pId === key) {
      let obj = {
        _id: dept._id,
        type: 'dept',
        name: dept.name,
        order: dept.order,
        children: []
      }
      arr.push(obj)
      dealDept(depts, obj.children, dept._id)
    }
  }
}
</script>

<style scoped lang='stylus'>
  @import "../../../../assets/common.styl"
  .dep-operate
    min-height 100px
  .title
    line-height 30px
  .tree
    overflow auto
    border none
    max-height 280px
  .tips
    color $c-prompt
    padding 0px 0 10px
    font-size 12px
  .tag
    margin 0 12px 12px 0
  .dep-list
    height 100px
    overflow auto
</style>
